let { $, table, layer, form, upload } = layui;
export default class Set {
    constructor(data) {
        this.render();
        this.handle(data);
    }
    render() {
        let str = ` <script type="text/html" id="adduers">
<form class="layui-form" style="width:400px" action="#" lay-filter="student">

<!-- 头像 -->
<div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="uploadBtn">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <img id="headImg" width="80" height="100" />
        <input type="hidden" name="headImg" >
    </div>
</div>

    <!-- 账户框 -->
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input id="addname" type="text" name="username" style="width: 200px;" required lay-verify="username" placeholder="请输入名字"
                autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- 密码框 -->
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input id="addage" type="text" name="pwd" style="width: 200px;" required lay-verify="pass" placeholder="请输入密码"
                autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- 手机号 -->
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" style="width: 200px;" required lay-verify="pass" placeholder="请输入手机号"
            autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- 电子邮箱 -->
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" style="width: 200px;" required lay-verify="pass" placeholder="请输入手机号"
            autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- 是否为管理人员 -->
    <div class="layui-form-item">
    <label class="layui-form-label">管理人员</label>
        <div class="layui-input-block">
            <input type="radio" name="privilege" value="1" title="是">
            <input type="radio" name="privilege" value="0" title="否">
        </div>
    </div>
</form>
</script>`;
        $("#addStudentTemplate").html(str);
    };
    handle(data) {
        layer.open({
            type: 1,
            btn: ["确定", "取消"],
            title: "修改用户信息",
            success: function () {
                $.ajax({
                    type: "get",
                    url: "/users/" + data._id,
                    success: function (res) {
                        $("#headImg").attr("src", "/image/" + res.data.headImg);
                        form.val("student", res.data);
                        // 上传头像
                        upload.render({
                            elem: "#uploadBtn",
                            url: "/upload",
                            done(res) {
                                console.log("Res", res);
                                $("#headImg").attr("src", "/image/" + res.filename);
                                $("[name=headImg]").val(res.filename);
                            }
                        });
                    }
                })
            },
            content: $("#adduers").html(),
            yes: function (index) {
                $.ajax({
                    type: "put",
                    url: "/users/" + data._id,
                    data: form.val("student"),
                    success: function (res) {
                        if (typeof res.data == "object") {
                            layer.msg("修改成功");
                            layer.close(index);
                            table.reload("studentsTable");
                        } else {
                            layer.msg("账号或密码不能为空");
                            layer.close(index);
                            table.reload("studentsTable");
                        }
                    }
                })
            }
        })
    };
}